<template>
  <div>
    <el-tree
      :data="treeData"
      :show-checkbox="showCheckBox"
      node-key="id"
      :default-expand-all="expandAll"
      :expand-on-click-node="false"
      ref="tree"
      v-loading="treeloadig"
      :check-strictly="checkStrictly"
      :highlight-current="1 == 1"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <el-button type="text" @click="OpendTreeNodeInfo(data)" :disabled="data.disabled">
            <i :class="data.icon"></i>
            <span :class="data.useNodeCss ? 'custom-tree-node-span' : ''">
              {{
              node.label
              }}
            </span>
          </el-button>
        </span>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  props: {
    treeData: {
      type: Array
    },
    expandAll: {
      type: Boolean,
      defaultValue: false
    },
    showCheckBox: {
      type: Boolean,
      defaultValue: false
    },
    treeloadig: {
      type: Boolean,
      defaultValue: false
    }
  },
  data() {
    return {
      name: "",
      value: "",
      checkStrictly: true,
      results: []
    };
  },

  methods: {
    OpendTreeNodeInfo(item) {
      if (!this.showCheckBox) {
        let result = [];
        result.push(item);
        this.$emit("OpenTreeItem", result);
      }
    }
  }
};
</script> 
